<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>忘记密码</title>
  <link rel="stylesheet" href="src/css/iview.css">
  <link rel="stylesheet" href="src/fonts/iconfont.css">
  <link rel="stylesheet" href="src/css/vue-style.css">
</head>

<body>
  <div class="forget-pwd">
    <div class="forget-pwd_return"><a href="">《返回</a></div>
    <h2 class="forget-pwd_title">找回密码</h2>
    <div class="forget-pwd_main">
      <ul class="step-title">
        <li class="active">
          <strong class="iconfont icon-identity"></strong>
          <p>验证身份</p>
        </li>
        <li>
          <strong class="iconfont icon-password"></strong>
          <p>设置新密码</p>
        </li>
        <li>
          <strong class="iconfont icon-complete"></strong>
          <p>完成</p>
        </li>
      </ul>
      <!-- 当输入框不为空时，按钮加上 class="active"，为蓝色 -->
      <!-- class="show" class="hide" 来控制步骤的显示与隐藏 -->
      <div class="forget-pwd_input ">
        <label for="account">请填写您需要找回的账号</label>
        <input type="text" name="account" id="account">
        <div class="forget-pwd_code">
          <input type="text" name="code" class="code">
          <a href="">获取验证码</a>
        </div>
        <input type="submit" value="下一步" id="send">
      </div>
      <div class="forget-pwd_input hide">
        <label for="fillinPwd">请填写新密码</label>
        <input type="text" name="fillinPwd" id="fillinPwd">
        <label for="confirmPwd">请再次确认新密码</label>
        <input type="text" name="confirmPwd" id="confirmPwd">
        <input type="submit" value="下一步" id="send">
      </div>
      <div class="forget-pwd_complete hide">
        <h2>设置成功，请牢记您的新密码!</h2>
        <p>页面将在<i>5秒</i>内跳转登录界面</p>
      </div>
    </div>
  </div>

  <script src="src/js/jquery-3.3.1.min.js"></script>
</body>

</html>